<template>
  <g class="forest" :transform="props.transform">
    <g
      v-for="(v, i) in bits"
      :key="v + i"
      :transform="`translate(0, ${i})`"
    >
      <Pixel
        v-for="(t, d) in v"
        :key="t + d"
        :x="d"
        :y="0"
        :fill="colors[bits[i][d]]"
      />
    </g>
  </g>
</template>

<script setup>
  import Pixel from './Pixel.vue'

  const props = defineProps(['transform'])

  const colors = {
    a: '#8CD600',
    b: '#005208',
    c: '#084A00',
    d: 'none',
  }

  const bits = [
    'dbbbcbad',
    'bbcacaca',
    'bbbccaaa',
    'cbbaabca',
    'bbacaaac',
    'bcbaaaaa',
    'aaaaacaa',
    'daacaaad',
  ]
</script>

<style lang="scss" scoped>

</style>